<template>
	<view >
		<view class="topText"  >
			<text class="topTitle">请输入您的手机号,登录或注册你的账号</text>
		</view>
		<view class="phoneNumber"  >
			<view class="phoneNumberTitle">
				<text>+86</text>
			</view>
			<input type="text" value="" @input="onKeyInput" name="phone"  placeholder="请输入手机号"  placeholder-style="font-size:26upx;color:#444444" />
		</view>
		<view class="verificationBox" >
			<view class="verificationCon">
				<text class="verificationLeft">验证码</text>
				<input type="text" value="" @input="onKeyverification" placeholder="请输入验证码"  placeholder-style="font-size:26upx;color:#444444" class="verificationInput" />
			</view>
			<button type="primary" :disabled="getverifSwitch" class="button" @click="getverification">{{getConfirms}}</button>
		</view>
		<view class="recommend" >
	
			<view class="recommendNumber">
				<text class="recommendText">推荐人</text>
				<input type="text" v-model="parentphone" placeholder="请输入手机号码"  @input="onKeyParent"  placeholder-style="font-size:26upx;color:#444444" />
			</view>
			<uni-icon type="scan" size="25" class="scan"  color="#8e8e8e" @click="scanCode()"></uni-icon>
		</view>
		<!-- <view class="agreement" >
			<label class="radio radioactive" @click="radioactive">
				<radio value="1"/>注册即同意
			</label>
			<span class="spantext" @click="toagreement">《用户注册协议》</span>
		</view> -->
		<view class="active">
			<button type="primary" class="activeBtn"  @click="next">开始</button>
		</view>
		<text class="spantext" @click="back()" style="padding: 10px 20px;float: right;">返回首页</text>
	</view>
</template>
<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
// import uniCountdown from "@/components/uni-countdown.vue"
var ef = new eonfox();
var validCode = true;
let verfication;
var t;
export default {
	data() {
		return {
			img:'',
			uid:'',
			oid:'',
			phone: '',
			confirm: '',
			password: '',
			index: 60,
			getConfirms: '获取验证码',
			parentphone: '',
			toagreement_checked:false,
			verifTime:0,
			getverifSwitch:true,
			oauthid:''
		};
	},
	onLoad(query){
		fns.bind()
		this.getStroges();
		var _this=this
		// #ifdef MP-WEIXIN
		
		// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
	// _this.tjname=JSON.stringify(scene);
	console.log('推荐号码',scene);
           if(scene!='undefined'){
			_this.parentphone=scene
			
		}
		// #endif
		ef.submit({
			request:{s:['USERSELF']},
			callback:function(res){
				var is_login=fns.checkError(res,'s');
				if(is_login){
					console.log("已经登录");
					uni.showToast({
						title:'已经登录',
						success() {
							setTimeout(function(){
								uni.reLaunch({
									url:'../../pages/index/index'
								})
							},1500)
						}
					})
				}
			}
		})
		if(query.pid){
			_this.parentphone=e.pid
		}
	},
	methods: {
		getStroges(){
			try {
			    const value = uni.getStorageSync('oauth_id');
			    if (value) {
			        console.log(value);
					this.oauthid = value
			    }
			} catch (e) {
			    console.log(e)
			}
		},
		radioactive(){
			this.toagreement_checked = true;
			uni.navigateTo({
				url:
					'../../pages/protocol/protocol' 
			});
		},
		next() {
			var phone= this.phone,
			parentphone=this.parentphone,
			code=this.confirm,
			oauthid = this.oauthid,
			_this=this;
			if(phone== "") {
				uni.showToast({
					title: '电话号码不能为空',
					icon: 'none'
				});
				return;
			}
			if (this.confirm == '') {
				uni.showToast({
					title: '验证码不能为空',
					icon: 'none'
				});
				return;
			}
			// if( !this.toagreement_checked ) {
			// 	uni.showToast({
			// 		title: '请选中用户协议',
			// 		icon: 'none'
			// 	});
   //             
			// 	return;
			// };
// 			if(parentphone=='' ) {
// 				parentphone='19982715832';
// 			};
			ef.submit({
					request: {
						s: ['SESSIONPHONEVERIFYCODECHECK', [{ phone:phone ,phone_verify_key:'sign_up',phone_verify_code:this.confirm}]]
					},
					callback: function(data) {
						var result=data.data.s
						if (data.data.s.errno ==1) {
							// clearInterval(t);
							uni.showToast({
								title: data.data.s.error,
								icon: 'none'
							});	
						} else {
							//注册成功
							uni.navigateTo({
								url:
									'../../pagesA/sigin/sigin?phone=' +
									phone +
									'&parentphone=' +
									parentphone +
									'&code=' +
									code +
									'&oauthid=' + 
									oauthid
							});
						}
					},
					error: function(err) {
						console.log('出错啦', err);
						uni.showToast({
							title:'出错啦',
							icon:'none'
						})
					}
			});
			
		},
		scanCode(){
			var _this=this;
			uni.scanCode({
				success: function (res) {
				// 					res.scanType='QR_CODE';
				// 					res.result={phone:12345678901};
									// _this.parentphone=res.result.phone
									console.log('条码类型：' + res.scanType);
									if(res.result){
										var data=JSON.parse(res.result);
										if(!data.errno){
											if(data.type!='user_recommend'){
												uni.showToast({
													title:'该二维码非邀请二维码'
												})
											}else if(data.data.user_phone){
												_this.parentphone=data.data.user_phone
											}else{
												uni.showToast({
													title:'扫码失败',
													icon:'none'
												})
											}
										}
									}
								}
			});
		},
		onKeyInput: function(event) {
			var _this=this
			this.phone = event.target.value;
			var that = this;
			if(this.phone == "") {
				return;
			} else if(this.phone.length == 11) {
				ef.submit({
					request: {//USEREXISTLOGINPHONECHECK
						s: ['USERPHONELOGINEXIST', [{ phone: this.phone }]]
					},
					callback: function(data) {			
						console.log(data)
						if (data.data.s.data == true) {
							uni.navigateTo({
								url:
									'../../pagesA/login/login?phone=' +
									that.phone 
							});
						} else {
							that.getverifSwitch=false;
							return;
						}
					},
					error: function(err) {
						console.log('出错啦', err);
						uni.showToast({
							title:'出错啦',
							icon:'none'
						})
					}
				});
			}
			
		},
		onKeyverification: function(event) {
			this.confirm = event.target.value;
		},
		onKeyPassword: function(event) {
			this.password = event.target.value;
		},
		onKeyParent: function(event) {
			if(this.parentphone.length != 11){
				uni.showToast({
					title:'手机号输入有误'
				})
			} 
		},
		toagreement: function() {
			//用户协议
			uni.navigateTo({
				url:
					'../../pages/protocol/protocol' 
			});
		},
		getverification: function() {
			let _this = this; 
			// 验证是否已进行验证码操作
			if(this.verifTime==0){
				if (!/^1[1234567890]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '电话号码有误，请重新输入',
						icon: 'none'
					});
					this.phone = '';
					return;
				} else {
					_this.getverifSwitch=true
					this.verifTime=60;
					_this.getConfirms=this.verifTime
					//倒计时
					var timeInterval=setInterval(function(){
						_this.verifTime -- ;
						if(_this.verifTime<=0){
							//倒计时结束清除定时器
							clearInterval(timeInterval)
							_this.getConfirms='重新发送'
							_this.getverifSwitch=false
							return;
						}
						_this.getConfirms=_this.verifTime
					},1000)
					// return;
					ef.submit({
							request: {
								s: ['SESSIONPHONEVERIFYCODESEND', [{ phone: this.phone,phone_verify_key:'sign_up' }]]
							},
							callback: function(data) {
								if (data.data.s.errno ==1) {
									uni.showToast({
										title: data.data.s.error,
										icon: 'none'
									});	
									clearInterval(timeInterval)
									_this.getConfirms = '重新获取';
									_this.getverifSwitch=false
									_this.verifTime=0;
									return;
								} else {
									uni.showToast({
										title: "验证码已发送",
										icon: 'none'
									});
								}
							},
							error: function(err) {
								console.log('出错啦', err);
								uni.showToast({
									title:'出错啦',
									icon:'none'
								})
							}
					});
				} 
			}else{
				uni.showToast({
					title: "请勿重复操作",
					icon: 'none'
				});
			}
			
	
				
		},
		back:function(){
			uni.reLaunch({
				url:
					'../../pages/index/index'
			})
		}
	},

	components: {
		uniIcon,
		eonfox
	}
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
	.topText
		height 100upx
		margin-left 40upx
		.topTitle
			line-height 100upx
			font-size 26upx
			font-weight 550
	.phoneNumber
		width 90%
		height 80upx
		margin 20upx auto
		background #F2F2F2
		border-radius 10upx
		display flex
		align-items center 
		.phoneNumberTitle
			width 130upx
			text-align center
			font-size 28upx
	.verificationBox
		width 90%
		height 80upx
		margin 20upx auto
		display flex
		align-items center   
		justify-content center// 垂直居中
		flex-direction row
		.verificationCon
			height 100%
			width 65%
			background #F2F2F2
			display flex
			align-items center   
			justify-content center// 垂直居中
			flex-direction row
			border-radius 10upx
			.verificationLeft
				width 200upx
				font-size 28upx
				font-weight 550
				text-align center
			.verificationInput
				display inline-block
		.button
			height 100%
			width 35%
			background #F76968
			font-size 28upx
	.recommend
		display flex
		align-items center   
		justify-content center// 垂直居中
		flex-direction row
		margin 50upx 0
		.checkbox-filled
			width 150upx
			text-align center
		.scan
			width 150upx
			text-align center
		.recommendNumber
			display flex
			align-items center   
			justify-content center// 垂直居中
			flex-direction row
			width 500upx
			background #F2F2F2
			padding 10upx 0
			border-radius 10upx
			.recommendText
				font-size 28upx
				width 150upx
				text-align center
				font-weight 550
	.active
		width 90%
		height 100upx
		margin 30upx auto
		.activeBtn
			width 100%
			background #F76968
			color #fff
	.agreement 
			width 90%
			// padding 18upx 0
			margin 0 auto
			.radio
				color: rgb(16, 16, 16)
				font-size 12px
				// width 12px
	// 			.radioactive 
	// 				color: 
			.spantext
				color rgb(102, 190, 255)
				font-size 12px
	.section
		width 90%
		// height 80upx
		margin 20upx auto
		padding 18upx 0
		background #F2F2F2
		border-radius 10upx
		position relative
		top 5px
		.eyesBox
			position absolute
			right 10upx
			top 25upx
			height 100%
			width 60upx
			.eyes
				width 40upx
				height 40upx
				position absolute
				right 10upx
				top 2upx
	     
</style>
<style>
	.threelogin-box{
		position: absolute;
		width :100%;
		height :100upx;
		top: 40%;
	}
	
	.threelogin-img{
		width: 80upx;
		margin-left: 335upx;
	}
	
	.threelogin-text{
		width: 100%;
		height :30upx;
		text-align :center;
		font-size: 23upx;
	}
	.threelogin-img image{
		width:80upx;
		height:80upx;
		margin-top: 40upx;
		/* #ifdef APP-PLUS */
		margin-left: 325upx;
		/* #endif */
	}
  .title-box{
			   width: 100%;
			   height: 60px;
			   color: #6666;
			   font-size :18px;
			   line-height: 60px;
			   background-color :#fff;
		   }
	      
	</style>
